<div [dMovable]="true" [handle]="header" [moveEl]="parent">
  <div class="modal-header" #header>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="22">
        {{ 'app.common.operate.new.title' | translate: data.title }}
      </d-col>
      <d-col [dSpan]="2" style="text-align: right">
        <d-button
          icon="icon-close"
          bsStyle="text-dark"
          title="{{ 'app.common.operate.close.label' | translate }}"
          (btnClick)="data.onClose()"
        ></d-button>
      </d-col>
    </d-row>
  </div>

  <div class="modal-body" style="padding: 0px 48px 18px 48px">
    <d-single-upload
      #singleupload
      id="fileInput"
      [fileOptions]="fileOptions"
      [uploadedFiles]="uploadedFiles"
      [uploadOptions]="uploadOptions"
      [filePath]="'name'"
      (deleteUploadedFileEvent)="deleteUploadedFile($event)"
      (errorEvent)="onError($event)"
      (successEvent)="onSuccess($event)"
      (fileSelect)="onFileSelect($event)"
      [disabled]="projectId == ''"
    >
    </d-single-upload>
  </div>
  <div class="modal-footer" style="text-align: right; padding-right: 42px">
    <d-form-operation>
      <d-button style="margin-right: 4px" bsStyle="common" (btnClick)="close($event)">{{
        'app.common.operate.cancel.label' | translate
      }}</d-button>
      <d-button bsStyle="primary" (btnClick)="submitForm()" [disabled]="!this.successFlag">{{
        'app.common.operate.confirm.label' | translate
      }}</d-button>
    </d-form-operation>
  </div>
</div>
